<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-26
    	描述：车辆-详情
    -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--详情-->
      <div class="common-form">车牌号</div>
      <el-form-item label="车牌号" prop="info.car_number" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.info.car_number" placeholder="请输入供应商名称" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="车辆类型">
        <el-select v-model="form.info.car_type" placeholder="请选择" :disabled="true">
          <el-option v-for="(item, index) in grade" :key="index" :label="item.type_name" :value="item.type_id">
          </el-option>
        </el-select>
      </el-form-item>

      <div v-if="form.info.category == 2">
        <el-form-item label="车辆行驶证印章页">
          <el-image style="width: 150px;" :src="form.info.car_info1" :preview-src-list="[form.info.car_info1]">
          </el-image>
        </el-form-item>
        <el-form-item label="车辆车险">
          <el-image style="width: 150px;" :src="form.info.car_info2" :preview-src-list="[form.info.car_info2]">
          </el-image>

        </el-form-item>

        <el-form-item label="车辆图片">
          <el-image style="width: 150px;" :src="form.info.car_info3" :preview-src-list="[form.info.car_info3]">
          </el-image>
        </el-form-item>
      </div>
      <div v-if="form.info.category == 1">
        <el-form-item label="车辆保险">
          <el-row>
            <el-button icon="el-icon-picture-outline" @click="openUpload('car_info1')">选择图片</el-button>
            <div v-if="form.info.car_info1!=''" class="img">
              <img :src="form.info.car_info1" width="320" height="150" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="车辆行驶证条码页">
          <el-row>
            <el-button icon="el-icon-picture-outline" @click="openUpload('car_info2')">选择图片</el-button>
            <div v-if="form.info.car_info2!=''" class="img">
              <img :src="form.info.car_info2" width="320" height="150" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="车辆营运证">
          <el-row>
            <el-button icon="el-icon-picture-outline" @click="openUpload('car_info3')">选择图片</el-button>
            <div v-if="form.info.car_info3!=''" class="img">
              <img :src="form.info.car_info3" width="320" height="150" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="车辆图片">
          <el-row>
            <el-button icon="el-icon-picture-outline" @click="openUpload('car_info4')">选择图片</el-button>
            <div v-if="form.info.car_info4!=''" class="img">
              <img :src="form.info.car_info4" width="320" height="150" />
            </div>
          </el-row>
        </el-form-item>
        <!-- <el-form-item label="车辆保险">
          <el-image style="width: 150px;" :src="form.info.car_info1" :preview-src-list="[form.info.car_info1]">
          </el-image>
        </el-form-item>
        <el-form-item label="车辆行驶证条码页">
          <el-image style="width: 150px;" :src="form.info.car_info2" :preview-src-list="[form.info.car_info2]">
          </el-image>
        </el-form-item>
        <el-form-item label="车辆营运证">
          <el-image style="width: 150px;" :src="form.info.car_info3" :preview-src-list="[form.info.car_info3]">
          </el-image>
        </el-form-item>
        <el-form-item label="车辆图片">
          <el-image style="width: 150px;" :src="form.info.car_info4" :preview-src-list="[form.info.car_info4]">
          </el-image>
        </el-form-item> -->
      </div>
      <div v-if="form.info.category == 2">
        <el-form-item label="车辆品牌">
          <el-input class="max-w460" v-model="form.info.brand_id" placeholder="车辆品牌" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车辆介绍" prop="info.content">
          <el-input class="max-w460" v-model="form.info.content" placeholder="车辆介绍" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="新车含税价" prop="info.price">
          <el-input class="max-w460" v-model="form.info.price" placeholder="价格" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="出售价格" prop="info.discharge">
          <el-input class="max-w460" v-model="form.info.discharge" placeholder="出售价格" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="卖车地点" prop="info.address">
          <el-input class="max-w460" v-model="form.info.address" placeholder="买车地点" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="表显路程" prop="info.journey">
          <el-input class="max-w460" v-model="form.info.journey" placeholder="表显路程" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上牌时间" prop="info.p_time">
          <el-input class="max-w460" v-model="form.info.p_time" placeholder="上牌时间" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="变速箱" prop="info.p_box">
          <el-input class="max-w460" v-model="form.info.p_box" placeholder="变速箱" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车辆过户次数" prop="info.transfer">
          <el-input class="max-w460" v-model="form.info.transfer" placeholder="车辆过户次数" :disabled="true"></el-input>
        </el-form-item>
      </div>


      <el-form-item label="状态">
        <el-radio-group v-model="form.info.status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">驳回</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
<!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
  import CarApi from '@/api/car.js';
  import Upload from '@/components/file/Upload';
  import {
    formatModel
  } from '@/utils/base.js'
  export default {
    components: {
      /*上传组件*/
      Upload
    },
    data() {
      return {
        /*form表单数据*/
        form: {
          id: 0,
          info: {
            car_number: '',
            status: 0,
            car_type: '',
            car_info1: '',
            car_info2: '',
            car_info3: '',
            car_info4: '',
          },
        },
        // car_info1: '',
        // car_info2: '',
        // car_info3: '',
        // car_info4: '',
        loading: false,
        isupload: false,
        grade: [],
        brand: [],
        info: {},
        type: 'car_info1'
      };
    },
    created() {
      this.form.id = this.$route.query.id;
      this.getData();
    },
    methods: {
      /*获取参数*/
      getData() {
        let self = this;
        CarApi.detail({
            id: self.form.id
          }, true)
          .then(res => {
            console.log(res);
            self.form.info = res.data.info;
            self.grade = res.data.grade;

          })
          .catch(error => {

          });
      },

      /*提交*/

      onSubmit() {
        let self = this;
        let form = self.form;
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            CarApi.editCar(form, true)
              .then(data => {
                self.loading = false;
                if (data.code == 1) {
                  self.$message({
                    message: '恭喜你，修改成功',
                    type: 'success'
                  });
                  self.$router.push('/car/index');
                } else {
                  self.loading = false;
                }
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });
      },
      /*上传*/
      openUpload(e) {
        this.type = e;
        this.isupload = true;
      },

      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          if (this.type == 'car_info1') {
            //this.logo_file_path = e[0].file_path;
            this.form.info.car_info1 = e[0].file_path;
          } else if (this.type == 'car_info2') {
            this.form.info.car_info2 = e[0].file_path;
          }else if (this.type == 'car_info3') {
            this.form.info.car_info3 = e[0].file_path;
          }else if (this.type == 'car_info4') {
            this.form.info.car_info4 = e[0].file_path;
          }

        }
        this.isupload = false;
      },


      /*取消*/
      cancelFunc() {
        this.$router.back(-1);
      },
      /*打开弹出层*/
      userClick() {
        this.open_user = true;
      },

      /*关闭获取用户弹窗*/
      closeDialogFunc(e) {
        if (e.type != 'error') {
          this.user_info = e.params[0];
          this.form.info.user_id = e.params[0].user_id;
        }
        this.open_user = false;
      },

    }

  };
</script>

<style lang="scss" scoped>
  .basic-setting-content {}

  .product-add {
    padding-bottom: 50px;
  }

  .img {
    margin-top: 10px;
  }
</style>
